﻿<template>
  <base-container>
    <div class="refresh-btn">
      <base-icon name="iconfont ic-tongbushuaxin" :size="16" color="var(--ct2)" />
      <span> 刷新页面</span>
    </div>
    <DetailsHeader :current-status="currentStatus" />
    <DetailsUserInfo
      @open-id-photo="onOpenIdPhoto"
      @open-biz-license-photo="onOpenBizLicensePhoto"
      @open-history="onOpenHistory"
    />
    <DetailsOrderInfo />
    <!-- <OrderInfo @open-progress="onOpenProgress" /> -->
    <!-- 消息中心抽屉 -->
    <!-- <ProgressDrawer v-model="showDrawer" :drawer-width="'72%'" :page-size="20" /> -->
  </base-container>
</template>

<script setup>
  import DetailsHeader from "./components/DetailsHeader.vue";
  import DetailsUserInfo from "./components/DetailsUserInfo.vue";
  import DetailsOrderInfo from "./components/DetailsOrderInfo.vue";

  const route = useRoute();
  const currentStatus = ref("pending_receipt");

  onMounted(() => {
    // 从路由参数获取订单ID
    const orderId = route.query.id;
    console.log("订单ID:", orderId);

    // 这里可以根据订单ID获取订单详情，设置当前状态
    // 暂时使用默认状态
  });

  function onOpenIdPhoto(payload) {
    console.log("打开身份证照片弹窗", payload);
    // TODO: 打开身份证查看弹窗
  }
  function onOpenBizLicensePhoto() {
    console.log("打开营业执照照片弹窗");
    // TODO: 打开营业执照查看弹窗
  }
  function onOpenHistory() {
    console.log("打开历史订单抽屉/弹窗");
    // TODO: 打开历史订单
  }
</script>
<style lang="scss" scoped>
  .refresh-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 16px;
    color: var(--ct2);
  }
</style>
